<template>
	<view class="page">
		<view class="formview">
			<vk-data-form ref="form1" v-model="form1.data" :action="form1.props.action" :columns="form1.props.columns"
				:rules="form1.props.rules" :form-type="form1.props.formType" :loading.sync="form1.props.loading"
				:auto-close="true" :show-cancel="false" submit-text="提交修改" label-width="140px" @success="onFormSuccess">
			</vk-data-form>
		</view>
		<el-divider></el-divider>
		<el-divider></el-divider>
		<view style="display: flex;flex-direction: column;margin: 20rpx">
			<view>
				【活动弹窗】说明：开启此功能后，每次重新进入小程序，都会弹窗.
				功能演示如下图
			</view>
			<view style="display: flex;flex-wrap: nowrap;">
				<image
					src="https://duanju-1257028257.cos.ap-guangzhou.myqcloud.com/houtai/yanshi/index_active_anli.jpeg"
					mode="aspectFit"></image>
			</view>
		</view>

	</view>
</template>

<script>
	var that; // 当前页面对象
	var vk = uni.vk; // vk实例
	const db = uniCloud.database();

	export default {
		data() {
			return {
				// 表单相关开始-----------------------------------------------------------
				form1: {
					// 表单请求数据，此处可以设置默认值
					data: {

					},
					// 表单属性
					props: {
						// 表单请求地址
						action: "admin/pages/kh/xcxpz/syhd/update",
						// 表单字段显示规则
						columns: [
							{ key: "", title: "①首页弹窗活动配置", type: "bar-title" },
							{
								"key": "active_name",
								"title": "活动名称",
								"type": "text",
								"width": 300
							}, {
								"key": "pic",
								"title": "活动弹窗图片",
								"type": "file-select",
								"placeholder": "请选择图片",
								"fileType": "image",
								"limit": 1
							},
							// {
							// 	"key": "pic",
							// 	"title": "活动弹窗图片链接",
							// 	"tips":"当图片存放在其他服务器上时，可以在这里直接填写图片链接。",
							// 	"type": "text",
							// 	"width": 300
							// },
							{
								"key": "jump_url",
								"title": "活动跳转地址",
								"type": "text",
								"width": 300
							},
							{
								"key": "status",
								"title": "活动状态",
								"width": 300,
								"type": "select",
								data: [
									{ value: true, label: "开启" },
									{ value: false, label: "关闭" }
								]
							},
							{ key: "", title: "②首页签到配置", type: "bar-title" },
							{
								"key": "signin_switch",
								"title": "首页签到开关",
								"width": 300,
								"type": "select",
								data: [
									{ value: true, label: "开启" },
									{ value: false, label: "关闭" }
								]
							},
							{
								"key": "signin_pic",
								"title": "首页签到图片",
								"type": "file-select",
								"placeholder": "请选择图片",
								"fileType": "image",
								"limit": 1
							},
							// {
							// 	"key": "signin_pic",
							// 	"title": "首页签到图片链接",
							// 	"tips":"当图片存放在其他服务器上时，可以在这里直接填写图片链接。",
							// 	"type": "text",
							// 	"width": 300
							// },
							{ key: "", title: "③首页订阅配置", type: "bar-title" },
							{
								"key": "xjqxk_switch",
								"title": "新剧抢先看开关",
								"width": 300,
								"type": "select",
								data: [
									{ value: true, label: "开启" },
									{ value: false, label: "关闭" }
								]
							},
							{
								"key": "xjqxk_pic",
								"title": "新剧抢先看图片",
								"type": "file-select",
								"placeholder": "请选择图片",
								"fileType": "image",
								"limit": 1
							},
							// {
							// 	"key": "xjqxk_pic",
							// 	"title": "新剧抢先看图片链接",
							// 	"tips":"当图片存放在其他服务器上时，可以在这里直接填写图片链接。",
							// 	"type": "text",
							// 	"width": 300
							// },
							{ key: "", title: "④首页继续观看配置", type: "bar-title" },
							{
								"key": "record_switch",
								"title": "首页继续观看开关",
								"width": 300,
								"type": "select",
								data: [
									{ value: true, label: "开启" },
									{ value: false, label: "关闭" }
								]
							},
							{ key: "", title: "⑤个人中心客服入口配置", type: "bar-title" },
							{
								"key": "xcx_kefu",
								"title": "个人中心客服开关",
								"width": 300,
								"type": "select",
								data: [
									{ value: true, label: "开启" },
									{ value: false, label: "关闭" }
								]
							},
							{
								"key": "xcx_kefu_text",
								"title": "联系客服文字",
								"tips": "默认为【联系客服】",
								"type": "text",
								"width": 300
							},

						],
						// 表单验证规则
						rules: {
							active_name: [{
								required: true,
								message: "活动名称不能为空",
								trigger: "change"
							}],
							pic: [{
								required: true,
								message: "图片不能为空",
								trigger: "change"
							}],
							jump_url: [{
								required: true,
								message: "活动跳转地址不能为空",
								trigger: "change"
							}],
							status: [{
								required: true,
								message: "状态不能为空",
								trigger: "change"
							}]
						},
						// add 代表添加 update 代表修改
						formType: "update",
						// 表单是否在请求中
						loading: false,
						// 是否显示表单1 的弹窗
						show: false
					}
				},
				// 表单相关结束-----------------------------------------------------------
			};
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			that = this;
			vk = that.vk;
			that.options = options;
		},
		async onShow() {
			this.loadData()
		},
		onReady() {

		},
		methods: {
			async loadData() {
				let user_role = vk.vuex.get("$user.userInfo.role");
				if (user_role.includes("admin")) {
					const config_youhui = await db.collection('a_config').where({
						name: "index_activity"
					}).get()
					this.form1.data = config_youhui.result.data[0]
				} else {
					vk.alert('无权限操作');
					vk.navigateToLogin();
				}

			},
			onFormSuccess() {
				this.loadData()
			}
		}
	};
</script>

<style>
	.page {
		padding-top: 20px;
	}

	.formview {
		width: 60%;
	}
</style>
